<template>
	<view class="message-view">
		<view class="top">
<!-- 			<uni-icons style="margin-left: 25rpx" type="home" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons> -->
			<view class="input">全部消息</view>
			<view style="width: 200rpx;display: flex;flex-direction: row;justify-content: flex-end;">
				<uni-icons style="margin-right: 30rpx" type="search" size="30" color="#9f9f9f" @click="toAddConversation">
				</uni-icons>
				<uni-icons style="margin-right: 30rpx" type="plus" size="30" color="#9f9f9f" @click="toAddGroup">
				</uni-icons>
			</view>
		</view>

		<view class="content">
			<view class="messages">
				<view v-if="conversationList.length === 0" style="padding: 30rpx; text-align: center; font-size: 34rpx">
					暂无私信
				</view>
				<view v-for="item in conversationList" :key="item.conversationID"
					@tap="handleRoute(item.conversationID)">
					<TUI-conversation-item :data-type="item.type" :conversation="item"></TUI-conversation-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TUIConversationItem from '@/components/tui-conversation/conversation-item/index'
	import TUIMessageList from '@/components/tui-chat/message-list/index'

	export default {
		components: {
			TUIConversationItem,
			TUIMessageList,
		},
		data() {
			return {
				conversationList: [{
						conversationID: 'conversationId123',
						type: 'C2C',
						subType: '',
						unreadCount: 10,
						lastMessage: {
							nick: '',
							nameCard: '',
							lastTime: 1673257210,
							lastSequence: 0,
							fromAccount: 'userId123',
							isRevoked: false,
							isPeerRead: false,
							messageForShow: '我刚刚发的消息',
							type: 'MSG_TEXT',
							payload: {
								text: '我刚刚发的消息',
							},
						},
						groupProfile: null,
						userProfile: {
							userId: 'userId123',
							nick: 'user123',
							avatar: 'https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png',
							gender: 'GENDER_UNKNOWN',
							birthday: 20010101,
							selfSignature: '个性签名',
							lastUpdatedTime: 1673251210000,
						},
						groupAtInfoList: [],
						remark: '备注名',
						isPinned: true,
						messageRemindType: 'MSG_REMIND_ACPT_AND_NOTE',
						markList: ['CONV_MARK_TYPE_STAR', 'CONV_MARK_TYPE_UNREAD'],
					},
					{
						conversationID: 'conversationId12344',
						type: 'GROUP',
						subType: 'GROUP_WORK',
						unreadCount: 1,
						lastMessage: {
							nick: 'ych',
							nameCard: 'ych-card',
							lastTime: 1673257210,
							lastSequence: 0,
							fromAccount: 'userId123',
							isRevoked: false,
							isPeerRead: false,
							messageForShow: '我刚刚发的群聊消息',
							type: 'MSG_TEXT',
							payload: {
								text: '我刚刚发的群聊消息',
							},
						},
						groupProfile: {
							groupId: 'userId123',
							name: 'user 的群聊',
							avatar: 'https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png',
							introduction: '简介就是这个',
							type: 'GRP_WORK',
							Notification: 'notice!!!!!',
							ownerId: 'user123',
							infoSequence: 1,
							lastInfoTime: 1673257110,
							selfInfo: {},
							memberCount: 10,
						},
						userProfile: {},
						groupAtInfoList: [],
						remark: '备注名',
						isPinned: true,
						messageRemindType: 'MSG_REMIND_ACPT_AND_NOTE',
						markList: ['CONV_MARK_TYPE_STAR', 'CONV_MARK_TYPE_UNREAD'],
					},
				],
			}
		},
		onLoad() {
			// 登入后拉去会话列表
			this.getConversationList()
			uni.$TUIKit.on(
				uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED,
				this.onConversationListUpdated
			)
		},
		onShow() {
			this.getConversationList()
			uni.$TUIKit.on(
				uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED,
				this.onConversationListUpdated
			)
		},
		onUnload() {
			uni.$TUIKit.off(uni.$TUIKitEvent.SDK_READY, this.onConversationListUpdated)
		},
		methods: {
			toBackPage() {
				uni.navigateBack()
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search',
				})
			},
			handleRoute(id) {
				console.log(id)
				uni.navigateTo({
					url:'/pages_message/message-detail?conversationID='+id,
				})
			},
			toAddConversation(){
				console.log("触发")
				uni.navigateTo({
					url: '/pages_message/TUI-Conversation/create-conversation/create',
				})
			},
			toAddGroup(){
				uni.navigateTo({
					url: '/pages_message/TUI-Group/create-group/create',
				})
			},
			onConversationListUpdated(event) {
				logger.log('TUI-conversation | onConversationListUpdated  |ok')
				this.setData({
					conversationList: event.data,
				})
			},
			getConversationList() {
				uni.$TUIKit.getConversationList().then((imResponse) => {
					console.log("读取信息列表", imResponse)
					this.conversationList = imResponse.data.conversationList
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.message-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 20rpx 0;

			background-color: white;
			border-bottom: solid thin #efefef;

			.input {
				margin-left: 30rpx;
			}
		}

		.content {
			display: flex;
			flex-direction: column;

			.messages {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.message {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 710rpx;
					height: 100rpx;
					padding: 20rpx;

					.avatar {
						height: 100rpx;
						width: 100rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}

					.message-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 590rpx;
						height: 90rpx;

						.message-right-top {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: flex-start;

							.nickname {}

							.date {
								font-size: 28rpx;
								color: gray;
							}
						}

						.message-content {
							width: 480rpx;
							font-size: 28rpx;
							color: gray;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 1;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}
					}
				}
			}
		}

		image {
			height: 100%;
			width: 100%;
		}
	}
</style>
